<template>
    <div>
        {{ student.name }}-{{ student.age }}-{{ genderStr }}
    </div>
</template>

<script setup>
import { computed, reactive } from 'vue';

let student = reactive({
    name: '张三',
    age: 22,
    gender: 1
});

const genderStr = computed(() => {
    return student.gender == 1 ? '男' : '女';
});

console.log(genderStr);
</script>
<!-- <script>
import { computed, reactive } from 'vue';

export default {
    setup() {
        let student = reactive({
            name: '张三',
            age: 22,
            gender: 1
        });

        const genderStr = computed(() => {
            return student.gender == 1 ? '男' : '女';
        });

        console.log(genderStr);

        return {
            student, genderStr
        }
    }
} 
</script>-->